<template>
  <div class="unitInfo-tableContainer">
    <div class="unitInfo-tableTitle">
      <h2>{{year}}年临安区公共机构公务用车油耗情况汇总表</h2>
    </div>
    <div class="water-header" style="margin-bottom:20px;">
      年份：
      <select style="width: 80px;" v-model="year" @change="getDetail()">
        <option :key="n" v-for="n in selectYear" :value="n">{{n}}</option>
      </select>
    </div>
    <div class="unitInfo-tableContent">
      <table width="100%" border="1" cellpadding="10">
        <tr style="background-color:rgb(231, 243, 255)">
          <td align="center" valign="middle">车号</td>
          <td align="center" valign="middle">车型</td>
          <td align="center" valign="middle">上半年<br/>公里数(千米)</td>
          <td align="center" valign="middle">上半年<br/>油耗(升)</td>
          <td align="center" valign="middle">上半年<br/>百公里油耗(升)</td>
          <td align="center" valign="middle">下半年<br/>公里数(千米)</td>
          <td align="center" valign="middle">下半年<br/>油耗(升)</td>
          <td align="center" valign="middle">下半年<br/>百公里油耗(升)</td>
          <td align="center" valign="middle">备注</td>
        </tr>
        <tr :key="index" v-for="(item ,index) in energyData">
          <td align="center" valign="middle">{{item.Number||'暂无'}}</td>
          <td align="center" valign="middle">{{item.Type||'暂无'}}</td>
          <td align="center" valign="middle">{{item.FirstKilometres||0}}</td>
          <td align="center" valign="middle">{{item.FirstFuelConsumption||0}}</td>
          <td align="center" valign="middle">{{calculate(item.FirstKilometres,item.FirstFuelConsumption)||0}}</td>
          <td align="center" valign="middle">{{item.SecondKilometres||0}}</td>
          <td align="center" valign="middle">{{item.SecondFuelConsumption||0}}</td>
          <td align="center" valign="middle">{{calculate(item.SecondKilometres,item.SecondFuelConsumption)||0}}</td>
          <td align="center" valign="middle"></td>
        </tr>
        <tr v-if="energyData.length==0">
          <td align="center" colspan="9" valign="middle">暂无数据</td>
        </tr>
      </table>
      <div class="table-button">
        <input type="button" value="打印" @click="prints()">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      year: new Date().getFullYear() + '',
      userInfo: JSON.parse(localStorage.getItem("userInfo")) ? JSON.parse(localStorage.getItem("userInfo")) : {},
      selectYear: [],
      isGetting: true,
      energyData: []
    }
  },
  methods: {
    async getDetail() {
      this.energyData = []
      const result = await this.$get("/api/CarFuel/statistics", {
        year: this.year,
        department: this.userInfo.department
      })
      if (result.length > 0) {
        this.energyData = result
      }
    },
    prints() {
      if (window.print != null) {
        window.print();
      }
      else {
        alert('您没有安装打印机，请安装后继续!')
      }
    },
    calculate(km, oil) {
      if (this.isGetting) {
        if (km && oil) return ((oil / km) * 100).toFixed(2)
        return 0
      }
    }
  },
  created() {
    var num = new Date().getFullYear();
    for (var i = num - 13; i < num + 1; i++) {
      this.selectYear.unshift(i);
    }
    this.showHome.isShow = false;
    this.getDetail()
  }
}
</script>
<style lang="scss" scoped>
.unitInfo-tableContainer {
  width: 100%;
  padding: 20px 15px;
}

.unitInfo-tableTitle {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 25px;
  h2 {
    font-size: 16px;
    margin-bottom: 10px;
  }
  span {
    font-size: 16px;
    font-weight: bold;
  }
  p {
    font-size: 16px;
    margin-top: 5px;
    font-weight: bold;
  }
}

.unitInfo-tableInfo {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 25px;
  color: #606266;
}

.unitInfo-tableContent {
  width: 100%;
  .table-titles {
    margin-bottom: 15px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    span {
      margin-right: 200px;
    }
  }
  table {
    td {
      padding: 6px 0px;
    }
    tr.table-row {
      height: 45px;
    }
  }
}

.table-footers {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  .tableFooter-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 25px;
    .tableFooter-col {
      flex: 1;
    }
  }
}

.table-button {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  input {
    width: 60px;
    margin-left: 25px;
  }
}
</style>



